<template>
  <div class="bg-white personal-content">
    <div class="personal-top">
      <span class="top-title">基本信息</span>
      <span v-if="!updataInfo">
        <Button type="primary" ghost @click="handleEditPassword(false)">修改密码</Button>
        <Button type="primary" ghost @click="handleEditInfo(false)">修改信息</Button>
      </span>
    </div>
    <component
      :is="componentName"
      @updata="updata"
      :updataFlag="updataInfo"
      @success="handleSuccess"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { schemasForm } from './personalCenter.data';
  import { Button } from 'ant-design-vue';
  import { FormSchema } from '/@/components/Form';
  import editInfo from './components/editInfo.vue';
  import editPassword from './components/editPassword.vue';

  const updataInfo = ref(false);

  let componentName: any = editInfo;
  let updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;

  const updata = (val) => {
    updateSchema = val;
  };

  const handleSuccess = () => {
    componentName = editInfo;
    handleEditInfo(true);
  };

  //  修改信息
  const handleEditInfo = (disabled: boolean) => {
    const updataFieldList = ['phone', 'name', 'userSex'];
    let updataList = schemasForm().filter((i) => {
      if (updataFieldList.includes(i.field)) {
        i.dynamicDisabled = disabled;
        return i;
      }
    });
    updataInfo.value = !disabled;
    updateSchema(updataList);
  };

  // 修改密码
  const handleEditPassword = (disabled: boolean) => {
    updataInfo.value = !disabled;
    componentName = editPassword;
  };

  // const arr = ref([
  //   // {
  //   //   name: '珠海1',
  //   //   id: '1025',
  //   //   customId: '1013-1021-1025',
  //   // },
  // ]);
  // const change = (val) => {
  //   console.log(val);
  // };
</script>

<style lang="less" scoped>
  .personal-content {
    height: calc(100vh - 112px);
    padding: 40px 25%;

    .personal-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 12px;
      border-bottom: 1px solid #f5f6f7;

      .top-title {
        color: #333333;
        font-weight: 550;
        font-size: 16px;
      }

      .ant-btn {
        font-size: 14px;

        & + .ant-btn {
          margin-left: 10px;
        }
      }
    }
  }
</style>
